{{define "Header"}}
<!DOCTYPE HTML>
<html lang="cn">
<head>
    <base href="/"/>
    <meta charset="utf-8"/>
    <title>CS NUTS</title>
    <script src="/static/js/jquery-1.8.0.js"></script>
    <link rel="stylesheet" href="/static/main.css" type="text/css">
    <link rel="stylesheet" href="/static/js/prettify/prettify.css" type="text/css">
    <script src="/static/js/prettify/prettify.js"></script>
    <script src="/static/js/vim.js"></script>
    <script src="/static/js/demo.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            $("img").each(function() {
                if($(this).width()>$(this).parent().width()) {
                    $(this).width("98%");
                }
            });
        });
        $(window).load(function(){
            $("pre > br").remove();
            prettyPrint();
        });
    </script>
    <script type="text/javascript">
        var curr=0;
        var totalArts={{.NumMsgs.Value}}
        var prev=false;
        var next=(curr<totalArts);
        DispNextPrev();
        
        function DispNextPrev() {
                next=(curr<totalArts)
                prev=(curr>0)
                if(next==false) {
                    $("#Next").css("display","none");
                }else{
                    $("#Next").css("display","block");
                }
                if(prev==true) {
                    $("#Prev").css("display","block");
                }else {
                    $("#Prev").css("display","none");
                }
        }
        function Next() {
            curr+=10;
            $.ajax({url:"{{.QueryBase}}next="+curr,
                    success:function(htmlobj) {
                        $("#articles").html(htmlobj);
                    },
                    error:function(){
                        next=false;
                        curr-=10;
                    }
            });
            DispNextPrev();
        }
        function Prev() {
            curr-=10;
            $.ajax({url:"{{.QueryBase}}next="+curr,
                    success:function(htmlobj) {
                    $("#articles").html(htmlobj);
                    },
                    error:function(){
                        yet=false;
                    }
            });
            DispNextPrev();
        }
        function Del(msgid) {
            $.ajax({
                url:"{{.SiteBase}}/del/?id="+msgid,
                success:function(htmlobj) {
                    window.location.reload();
                },
                error:function(htmlobj){
                    alert("Bad Request");
                }
            });
        }
        function Good(msgid) {
            $.ajax({url:"{{.SiteBase}}/good/?id="+msgid,
                success:function(htmlobj) {
                    var good=$("#"+msgid).text();
                    good++;
                    $("#"+msgid).text(good);
               },
               error:function(htmlobj){
               }
            });
        }
        function ResizeTextarea() {
            var t=document.getElementById("newctnt");
            var h=t.scrollHeight;
            h=h>110?465:100;
            t.style.height=h+"px";
        }
    </script>
</head>

<body>
    <header>
        <div id="loginbar"><p>{{.Loginbar}}</p>
        </div>
        <div id="navbar">
            <div id="nav">
                <a id="logo" href="/" >CS NUTS</a>
                <div id="navbarItems">
                    <nav>
                        <li><a href="/tag/?tag=cpp">cpp</a></li>
                        <li><a href="/tag/?tag=java">java</a></li>
                        <li><a href="/tag/?tag=golang">golang</a></li>
                        <li><a href="/tag/?tag=golang">ask</a></li>
                        <li><a href="/tag/?tag=feature">feature</a></li>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <div id="wrapper">
        <div id="rightbar">
            <div id="tagcloud">
                <h2>Tag Cloud</h2>
                <hr>
                <ul>
                    {{ range .TagCloud }} <a href="/tag/?tag={{.TagName}}" target="_blank">{{.TagName}}</a> {{end}}
                </ul>
            </div>
        </div>
        <!-- content start -->
        <div id="content">
            <!--sign -->
            <div id="postform">
                <form action="/sign" method="post">
                    <div class="textinput"><label>Title(100B):</label><textarea id="newtitle" name="title" rows="1" ></textarea></div>
                    <div class="textinput" ><label>Cntnt(10K):</label><textarea id="newctnt" name="content" onpropertychange="ResizeTextarea()" oninput="ResizeTextarea()" onkeyup="ResizeTextarea()" ></textarea></div>
                    <div class="textinput"><label>Tags(80B):</label><textarea name="tags" rows="1" ></textarea></div>
                    {{with .U }}{{else}}
                    <div class="textinput"><label>Author(50):</label><textarea name="author" rows="1" ></textarea></div>
                    {{end}}
                    <hr>
                    <div id="submit"><input id="butsubmit" type="submit" value="Post"></div>
                </form>
            </div>
            <!--end sign-->
{{end}}
